<template>
  <div class="content_box">
    <div class="msg_box">
      <div class="box">
        <p class="title">2023-01账单</p>
        <p class="text">门店名称：杠小二茶楼</p>
        <div class="tab_box">
          <div class="tab">
            <p class="num">￥60.00</p>
            <p class="text1">店铺收益</p>
          </div>
          <p class="line"></p>
          <div class="tab">
            <p class="num">80%</p>
            <p class="text1">分成比例</p>
          </div>
          <p class="line"></p>
          <div class="tab">
            <p class="num">￥48.00</p>
            <p class="text1">分成金额</p>
          </div>
        </div>
      </div>
    </div> 
    <div class="table_box">
      <div class="box">
        <div class="title_box">
          <p>日期</p>
          <p>店铺收益</p>
          <p>分成比例</p>
          <p>分成金额</p>
        </div>
        <div class="list">
          <p>2023-01-31</p>
          <p>6.00</p>
          <p>80</p>
          <p>4.80</p>
        </div>
        <div class="list">
          <p>2023-01-31</p>
          <p>6.00</p>
          <p>80</p>
          <p>4.80</p>
        </div>
        <div class="list">
          <p>2023-01-31</p>
          <p>6.00</p>
          <p>80</p>
          <p>4.80</p>
        </div>
        <div class="list">
          <p>2023-01-31</p>
          <p>6.00</p>
          <p>80</p>
          <p>4.80</p>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  components: {
  },
  data() {
    return{
    
    }
  },
  onShow() {
 
  },
  methods: {
    
  },
  onHide() {},
  onLoad() {
    
  },
  onUnload() {
  },
  created() {}
};
</script>

<style lang="scss"  scoped>
.content_box {
  min-height: 100vh;
  background: #f5f5f5;  
  padding-top:30rpx;
  .msg_box{
    width: 92%;
    margin:0 auto;
    background-image: linear-gradient(to bottom, #095FFF , #0440FD);
    color:#fff;
    border-radius: 8rpx;
    .box{
      padding:30rpx;
      .title{
        font-size:42rpx;
        font-weight: 500;
      }
      .text{
        font-size:30rpx;
        margin:34rpx 0;
      }
      .tab_box{
        display: flex;
        justify-content: space-between;
        .line{
          width: 1px;
          height: 100rpx;
          background: #f5f5f5;
        }
        .tab{
          text-align: center;
          .num{
            font-size:36rpx;
            font-weight: 500;
            margin-bottom:14rpx;
          }
          .text1{
            font-size:26rpx;
          }
        }
      }
    }
  }
  .table_box{
    width: 92%;
    margin:0 auto;
    background: #fff;
    border-radius: 8rpx;
    margin-top:30rpx;
    .title_box{
      background: #F9FAFC;
      display: flex;
      justify-content: space-between;
      height: 100rpx;
      align-items: center;
      p{
        width: 25%;
        text-align: center;
        font-size:28rpx;
        color:#666
      }
    }
    .list{
      display: flex;
      justify-content: space-between;
      height: 100rpx;
      align-items: center;
      border-bottom:1px solid #f5f5f5;
      p{
        width: 25%;
        text-align: center;
        font-size:28rpx;
        color:#666
      }
    }
  }
}
</style>
